<template>
  <div class="page">
    <Navbarelder title="我的帮服" />
    <van-tabs v-model="activeTab" color="#4B93FE" @change="onRefresh">
      <van-tab title="全部" :name="-1" />
      <van-tab title="受理中" :name="0" />
      <van-tab title="已完成" :name="1" />
      <van-tab title="待受理" :name="2" />
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />
        <div class="record-list">
          <div
            v-for="(item,index) in tableData"
            :key="index"
            class="record-item"
          >
            <help1 v-if="item.types == 0" :item="item" />
            <help2 v-if="item.types == 1" :item="item" />
            <help3 v-if="item.types == 2" :item="item" />
            <help4 v-if="item.types == 3" :item="item" />
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_help_serve } from '@/api'
import { helpGType, qsStatus, qsType } from '@/eumn'
import Help1 from '@/views/myelder/help/help1'
import Help2 from '@/views/myelder/help/help2'
import Help3 from '@/views/myelder/help/help3'
import Help4 from '@/views/myelder/help/help4'
import { Toast } from 'vant'
export default {
  name: 'Help',
  components: { Help1, Help2, Help3, Help4 },
  mixins: [refresh],
  data() {
    return {
      activeTab: -1,
      tableData: []
    }
  },
  methods: {
    onRefresh() {
      this.pageNo = 1
      this.getList()
    },
    getList() {
      if (this.pageNo > 1 && this.tableData.length >= this.totalSize) return Toast('没有更多了')
      http_help_serve.page({
        ...this.getQueryParams(),
        contentStatus: this.activeTab === -1 ? undefined : this.activeTab
      }).then(res => {
        if (this.pageNo === 1) {
          this.tableData = res.data.records.map(el => {
            return {
              ...el,
              typeName: qsType.getName(el.types),
              types: Number(el.types),
              gTypeName: helpGType.getName(el.gtype),
              statusName: qsStatus.getName(el.status),
              statusColor: qsStatus.getColor(el.status)
            }
          })
        } else {
          this.tableData = [
            ...this.tableData,
            ...res.data.records.map(el => {
              return {
                ...el,
                typeName: qsType.getName(el.types),
                types: Number(el.types),
                gTypeName: helpGType.getName(el.gtype),
                statusName: qsStatus.getName(el.status),
                statusColor: qsStatus.getColor(el.status)
              }
            })
          ]
        }
        this.totalSize = res.data.total
        this.refreshLoading = false
      })
    }

  }
}
</script>

<style scoped lang="scss">
::v-deep .van-tab{
font-size: 18px;
}
::v-deep .label-title{
font-size: 20px;
line-height: 23px;
overflow:inherit;
text-overflow: inherit;
white-space: inherit;
width: 246px;
}
::v-deep .button1{
  height: 24px;
  font-size: 18px;
  line-height: 24px;
  width: auto;
  padding: 0 3px;
  position: absolute;
  top: 29px;
  right: 12px;
  margin-right: -11px;
}
::v-deep .status{
  font-size: 18px;
  height: 22px;
  line-height: 22px;
  width: 70px;
}
::v-deep .label{
  font-size: 16px;
}
.record-list {
    .record-item {
        margin-bottom: 20px;
        border: 1px solid #2B80FF;
        padding:12px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        position: relative;
        .title-box {
            margin-bottom: 15px;
        }
        .label-title {
            line-height: 22px;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            margin-right: 10px;
            overflow:inherit;
            text-overflow: inherit;
            white-space: inherit;
        }
        .link {
            height: 16px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #2F86FD;
        }
        .label {
            height: 12px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-bottom: 15px;
        }

        .button1 {
            color: #2B80FF;
            width: 59px;
            height: 24px;
            background: #D8E8FF;
            border: 1px solid #2F86FD;
            border-radius: 10px;
            text-align: center;
            font-size: 12px;
            line-height: 22px;
        }
        .status {
            width: 50px;
            height: 21px;
            line-height: 21px;
            font-size: 12px;
            color: #fff;
            border-radius: 0px 10px 0px 0px;
            position: absolute;
            right: 0;
            top: 0;
            text-align:center;
        }
        .status1 {
            background: #4B93FE;
        }
        .status2 {
            background: #20B153;
        }
    }
}
</style>
